<template>
    <div id="home">
        <!-- home组件自定义头部栏 -->
        <navbar class="home-nav">
            <template #centernav>购物街</template>
        </navbar>
          <tabcontrol v-show="istabfixed" ref="tabcontrol1" @tabchange="tabchange" id="tablist" :titles="['精选','热门','推荐']"></tabcontrol>

        <!-- 轮播图 -->
       <scoll :prototype='3' class="homecontent" ref="scoll" @isshowbacktop="showbacktop" @pullingUp="getmoredata">
            <van-swipe :autoplay="3000" :height='180'>
               <van-swipe-item v-for="(item, index) in banners" :key="index">
                    <img v-lazy="item.image" class="swipimg" @load="showload"/>
               </van-swipe-item>
             </van-swipe>
        <!-- 推荐区 -->
          <recommend :recomments="recommends"></recommend>
        <!-- 本周流行 -->
         <feature></feature>
        <!-- tab(精选,热门,推荐) -->
          <tabcontrol v-show="!istabfixed"  ref="tabcontrol" @tabchange="tabchange" id="tablist" :titles="['精选','热门','推荐']"></tabcontrol>
          <goodslist  :goods="dateitem" ></goodslist>
       </scoll>
       <backtop v-show="showback" @click.native="backtop"></backtop>
         
    </div>
</template>

<script>
import navbar from '../../components/common/navbar/NavBar'
import recommend from './childcomps/Recommend'
import feature from './childcomps/Feature'
import tabcontrol from '@/components/content/tabcontrol/TabControl'
import goodslist from '@/components/content/goods/goodslist'
import scoll from '../../components/common/bscoll/Scorll'
import backtop from '@/components/content/backtop/Backtop'

import {getHomeMultidata,getHomeGoods} from '@/network/home.js'
export default {
    components:{
        navbar,
        recommend,
        feature,
        tabcontrol,
        goodslist,
        scoll,
        backtop
    },
    computed:{
        dateitem(){
            return this.gooods[this.curenttype].list
        },
        

    },
    data() {
        return {
            banners:[],
            recommends:[],
            gooods:{
                'pop':{page:0,list:[]},
                'new':{page:0,list:[]},
                'sell':{page:0,list:[]}
            },
            curenttype:'pop', // 默认选中的tab名
            showback:false,
            taboffsettop:0,
            istabfixed:false
        }
    },
    created() {
        // 1 请求多个数据
        this.gethomeMultidata()
        // 请求商品数据
        this.getHomegoods('pop')
        this.getHomegoods('new')
        this.getHomegoods('sell')
        
       
    },
    
    methods: {
        // 1 请求多个数据
        gethomeMultidata(){
            getHomeMultidata().then(res=>{
            this.banners = res.data.banner.list
            this.recommends = res.data.recommend.list
        })
        },
        // 请求商品数据
        getHomegoods(type){
            const page = this.gooods[type].page+1
            getHomeGoods(type,page).then(res=>{
                console.log(res.data.list)
                this.gooods[type].list=[...this.gooods[type].list,...res.data.list]
                this.gooods[type].page+=1
            })

        },
        // 切换tab
        tabchange(i){
            switch (i) {
                case 0:
                    this.curenttype='pop'
                    break;
                case 1:
                    this.curenttype='new'
                    break;
                case 2:
                    this.curenttype='sell'
                    break;
                default:
                    break;
            }
            this.$refs.tabcontrol1.curent = i
            this.$refs.tabcontrol.curent = i
        },
        // 返回顶部
        backtop(){
            this.$refs.scoll.bscoll.scrollTo(0,0,600)
        },
        // 展示返回顶部
        showbacktop(postion){
           this.istabfixed = (-postion.y)>this.taboffsettop
           this.showback = postion.y>-1000?false:true
        },
        //上拉加载更多
        getmoredata(){
            this.getHomegoods(this.curenttype)
        },
        showload(){
            this.taboffsettop = this.$refs.tabcontrol.$el.offsetTop
        }

    },
   
}
</script>

<style scoped>
#home{
    height: 100vh;
}
.home-nav{
    background-color: #ff8198;
    color:#fff;
    box-shadow: 0 1px 4px #ff8198;
    overflow: auto;
}
.swipimg{
    width: 100%;
    height: 100%;
}

.homecontent{
    height: calc(100% - 49px);
    overflow: hidden;
}
.fixedtab{
    position: fixed;
    left: 0;
    right: 0;
    top: 44px;
    z-index: 99999;
}
.howta{
    visibility: hidden;
}
.showtab{
    display: black;
}
</style>